https://codepen.io/hereiscasio/pen/ZqXVWN?editors=1010

Used UI Component ( #2 )

#1 Subheaders, #2 Select, #3 dialog

UI 圖來源見此

Discussion

你或許可能覺得：「 Vuetify 幹嘛連 Subheader 這種超簡單的東西也要特別搞個專屬的 Component ？ 」，我想此處關鍵不在於它簡單與否，而是常用與否，Subheader 在列表或是卡片這類組件上很常使用，所以就被規格化了。本日我能想到比較有趣的地方在於：請移除所有的 hide-details，然後看看發生了什麼事，並問自己為什麼（ 因為這對版面結構有較大影響，若你事先不知道這個屬性，可能就會為了移除一些 "跑版"，寫了一堆客製化 CSS ）

至於為何會用 v-dialog，一樣就是看你怎麼看待這個圖面，我直覺這種畫面出現時，通常都是先按了什麼東西，然後 "跳出來"，就像 dialog 一樣，值得一提的是，就是因為用了 v-dialog，我們不再需要透過 <v-row justify='center' align='center'>，嘗試把此卡片垂中水平置中，因為這就是 v-dialog 的預設